<!--
 * @description: 新增提现明细
 * @Author: latiao
 * @Date: 2021-11-10 14:36:19
 * @LastEditors: latiao
 * @LastEditTime: 2021-11-22 11:35:32
-->
<template>
  <!--  提现明细-->
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="closeHandle"
    class="dialog"
    :title="(checkedItem[0] ? checkedItem[0].nikeName : '') + '的提现明细'"
  >
    <el-row class="queryTime">
      <el-date-picker
        v-model="queryForm.yearMonth"
        type="month"
        value-format="yyyyMM"
        @change="pickTime"
        placeholder="选择月"
      >
      </el-date-picker>
    </el-row>
    <el-table
      :data="dataList"
      :header-cell-style="{
        background: '#DCDFE6',
      }"
    >
      <el-table-column prop="createTime" label="提现时间"> </el-table-column>
      <el-table-column prop="amount" label="提现金额">
        <template slot-scope="scope">
          <!-- <span style="color: red;" v-if="scope.row.amount === 0.3"
            >+{{ scope.row.amount }}</span
          > -->
          <span >-{{ scope.row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="auditStatus" label="状态"> 
         <template slot-scope="scopes">
          <span  v-if="scopes.row.auditStatus === 'PENDING_PARTNER'"
            >待审核</span
          >
          <span style="color:green;" v-if="scopes.row.auditStatus === 'PASSED'"
            >已到账</span
          >
          <span style="color: red;" v-if="scopes.row.auditStatus === 'REJECTED'"
            >已拒绝</span
          >
        </template>
      </el-table-column>
    </el-table>
    <PageManage
      :pageSize="pageSize"
      :pageNum="pageNum"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component, Prop, PropSync, Watch } from "vue-property-decorator";
// import { getBalanceDetail } from "@/api/customer/member";
import PageManage from "@/components/PageManage.vue";
import DateUtil from "@/store/modules/date";
import { getWithdrawalList} from "@/api/finance/index";

@Component({
  components: {
    PageManage,
  },
})
export default class BalanceDetail extends Vue {
  @PropSync("visible", {
    type: Boolean,
    default: false,
  })
  dialogVisible: boolean;

  @Prop({
    type: Array,
    default: () => {
      return [];
    },
  })
  checkedItem;

  /** 分页条数 */
  pageSize = 10;

  /** 分页页码 */
  pageNum = 1;

  /** 数据长度 */
  total = 0;

  queryForm = {
    yearMonth: "",
  };

  dataList: any = [];

    form = {
    // ASS, AREA_ASS, POINT
    accountType: "",
    auditStatus: "",
    id: "",
    keyword: "",
    name: "",
    applyTime: "",
    startTime:"" ,
    endTime: "",
    current: 1,
    size: 10,
  };

  @Watch("dialogVisible")
  handleVisibleChange(v) {
    if (v) {
      const now = new DateUtil();
      this.queryForm.yearMonth = `${now.getY()}${now.getM()}`;
      console.log("this.queryForm.yearMonth",this.queryForm.yearMonth);
      this.getDataList();
    }
  }

  pickTime(){
    // console.log(this.queryForm.yearMonth);
    this.pageNum = 1
    this.getDataList();

  }


  getDataList() {
    let year:number=Number(this.queryForm.yearMonth.substring(0,4)) 
    let month:number =Number(this.queryForm.yearMonth.substring(4,6)) 
  
    const startTime=`${year}-${month}-01 00:00:00`
    if(month+1>12){
     year=year+1
     month=0
    }
    
    const endTime=`${year}-${month+1}-01 00:00:00`

    getWithdrawalList({ ...this.form,userId:this.checkedItem[0].userId,startTime,endTime})
      .then(res => {
        console.log("111111111111111",res);
           this.dataList = res.data.list;
           this.pageSize = res.data.size;
           this.pageNum = res.data.current;
           this.total = res.data.total;
      })
      .catch(err => {
        this.$message.warning(err || "工单获取失败");
      });
  }

  // async getDataList() {
  //   const form = {
  //     page: this.pageNum,
  //     size: this.pageSize,
  //     yearMonth: this.queryForm.yearMonth,
  //     userShopId: this.checkedItem[0].userId,
  //   };
  //   const data = await getBalanceDetail(form);
  //   this.dataList = data.data.list;
  //   this.pageSize = data.data.size;
  //   this.pageNum = data.data.current;
  //   this.total = data.data.total;
  // }

  /**
   * @method handleSizeChange
   * @description 每页 条
   */
  handleSizeChange(val) {
    this.pageSize = val;
    this.pageNum = 1
    this.getDataList();
  }

  /**
   * @method handleCurrentChange
   * @description 当前页
   */
  handleCurrentChange(val) {
    this.pageNum = val;
    this.getDataList();
  }

  /**
   * 关闭弹窗
   */
  async closeHandle() {
    try {
      const result = await this.confirmHandle();
      if (result === "confirm") {
        this.dialogVisible = false;
      }
    } catch (e) {
      console.log(e);
    }
  }

  async beforeCloseHandle(done) {
    try {
      const result = await this.confirmHandle();
      if (result === "confirm") {
        done();
      }
    } catch (e) {
      console.log(e);
    }
  }

  /**
   * 关闭确认
   */
  async confirmHandle() {
    return await this.$confirm("确定退出提现明细页面？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });
  }
}
</script>

<style scoped lang="scss">
.queryTime {
  float: right;
  margin-bottom: 25px;
}
/deep/ .el-dialog__header {
  border-bottom: 1px solid rgba(128, 128, 128, 0.23);
}
</style>
